<template>
    <div class="container">
        {{ count }}
        <el-button
            type="primary"
            @click="addCount"
        >
            addCount
        </el-button>
        <input
            ref="iptRef"
            type="text"
            :value="cCount"
        />
        {{ cCount1 }}
        <el-button @click="showDialog">
            el-dialog
        </el-button>
        <Dialog :visible.sync="isShow" />
        <svg-icon
            icon-class="guide"
            fill-color="skyblue"
        />
    </div>
</template>

<script>
import {
    computed, onMounted, reactive, ref, toRefs, watch, watchEffect,
} from '@vue/composition-api';
import MsgBox from './msgBox';
import Dialog from './Dialog';

export default {
    components: {
        Dialog,
    },
    setup (props, context) {
        console.log(props, context);
        const { root } = context;
        const h = root.$createElement;
        const state = reactive({
            isShow: false,
            count: 0,
            iptRef: ref(''),
            cCount1: computed(() => state.count + 1),
        });
        const cCount = computed(() => state.count + 1);
        const showDialog = () => {
            state.isShow = true;
        };
        onMounted(() => {
            console.log(state.iptRef);
            state.iptRef.focus();
        });
        watch(
            () => state.count,
            (preCount, curCount) => {
                console.log(preCount, curCount);
            },
            {
                immediate: true,
            },
        );
        watchEffect(() => {
            console.log(state.count);
        });
        const addCount = () => {
            state.count += 1;
            root.$msgbox({
                customClass: 'msgbox',
                showClose: true,
                title: 'msgbox',
                center: true,
                showConfirmButton: false,
                message: (() => {
                    const config = { taskId: 123 };
                    return h(MsgBox, { attrs: { ...config }, key: Date.now() });
                })(),
            }).catch(() => {});
        };
        return {
            ...toRefs(state), cCount, showDialog, addCount,
        };
    },
};
</script>

<style lang="scss">
.el-message-box__wrapper .msgbox {
    margin-top: 5vh;
    width: 80%;
}
.el-message-box__wrapper {
    overflow: auto;
}
</style>
